<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tlt</title>
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const chart = echarts.init(document.getElementById('chart'))
    const option = {
      legend: {}, // 头部页签
      tooltip: {}, // 鼠标移入的数据展示框
      xAxis: [
        {
          type: 'category',
          gridIndex: 0 // 指定该坐标轴属于哪个 grid
        },
        {
          type: 'category',
          gridIndex: 1
        }
      ],
      yAxis: [
        {
          gridIndex: 0
        },
        {
          gridIndex: 1
        }
      ],
      dataset: {
        source: [
          ['product', '2012', '2013', '2014', '2015'],
          ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
          ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
          ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
      },
      grid: [
        {
          bottom: '55%'
        },
        {
          top: '55%'
        }
      ],
      series: [
        // 在第一个直角坐标系中 - 每个系列对应到 dataset 的每一行
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        // 在第二个直角坐标系中 - 每个系列对应到 dataset 的每一列。
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
      ]
    }
    chart.setOption(option)
  </script>
</html>
